<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="/css/style_login.css">
    <link rel="stylesheet" href="../static/css/style_login.css">
    <link href="../static/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="../static/font/bootstrap-icons.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.min.js"></script>
    <script src="/js/VarGloba.js"></script>
    <style>

        body{
            background-image: url();
        }
    </style>
</head>
<body>
<div class="pen-title">
    <h1>火花音乐</h1><span><a href=''>Welcome</a></span>
</div>
<!-- Form Module-->
<div class="module form-module">
    <div class="toggle"><i class="fa fa-times fa-pencil">切换</i>
    </div>
    <div class="form">
        <h2>登录</h2>
        <div>
            <input type="text" id="usernameLog" placeholder="Username"/>
            <input type="password" id="passwordLog" placeholder="Password"/>
            <button onclick="login()">Login</button>
        </div>
    </div>
    <div class="form">
        <h2>创建您的用户</h2>
        <div>
            <input type="text" id="usernameRegister" placeholder="用户名"/>
            <input type="email" id="email" placeholder="邮箱"/>
            <input type="password" id="passwordRegister" placeholder="密码"/>
            <input type="text" id="shengfen" placeholder="所在省份"/>
            <input type="text" id="likeType" placeholder="喜爱的类型"/>
            <input type="text" id="age" placeholder="年龄"/>
            <input type="text" id="gender" placeholder="性别"/>
            <button onclick="register()">Register</button>
        </div>
    </div>
</div>
<script src="../static/js/jquery-1.11.2.min.js"></script>
<script src="/js/jquery-1.11.2.min.js"></script>
<script >
    // Toggle Function
    $('.toggle').click(function(){
        // Switches the Icon
        $(this).children('i').toggleClass('fa-pencil');
        // Switches the forms
        $('.form').animate({
            height: "toggle",
            'padding-top': 'toggle',
            'padding-bottom': 'toggle',
            opacity: "toggle"
        }, "slow");
    });
</script>
<script>
    function login() {
        var userneme = $("#usernameLog").val();
        var password = $("#passwordLog").val();
        if (userneme == undefined || userneme == ""){
            alert("请输入用户名");
        } else if (password == undefined || password == ""){
            alert("请输入密码");
        }else {
            var user = {
                "user_name":userneme,
                "password":password
            };
            $.ajax({
                type:"post",
                url:BaseURL+"/Tologin",
                dataType:"json",
                contentType:"application/json",
                data:JSON.stringify(user),
                success:function (data) {
                    if (data.code == 200){
                        alert("登录成功");
                        window.location.href = BaseURL+"main";
                    } else {
                        alert(data.msg);
                    }
                }
            })
        }
    }

    function register() {
        var email = $("#email").val();
        var username = $("#usernameRegister").val();
        var password = $("#passwordRegister").val();
        var age =$("#age").val();
        var likeType = $("#likeType").val();
        var gender = $("#gender").val();
        var shengfen = $("#shengfen").val();
        if (email == undefined || email == "") {
            alert("请输入注册邮箱");
        }else if (age == undefined || age == ""){
            alert("请输入年龄");
        }else if (username == undefined || username == ""){
            alert("请输入用户名");
        } else if (likeType == undefined || likeType == ""){
            alert("至少输入一个喜欢音乐的种类");
        }else if (gender == undefined || gender == ""){
            alert("请输入性别");
        }else if (shengfen == undefined || shengfen == ""){
            alert("请输入所在省份")
        }else if (password == undefined || password == ""){
            alert("请设置密码")
        } else {
            var user = {
                "user_emil":email,
                "user_name":username,
                "user_liketage":likeType,
                "user_address":shengfen,
                "user_age":age,
                "user_gender":gender,
                "password":password
            };
            $.ajax({
                type:"post",
                url:BaseURL+"/Toregister",
                contentType:"application/json",
                dataType:"json",
                data:JSON.stringify(user),
                success:function (data) {
                    console.log(data);
                    if (data.code == 200){
                        alert("注册成功");
                        window.location.href =BaseURL+"/main";//跳转到主界面
                    }else {
                        alert(data.msg);
                    }
                }
            })
        }
    }
</script>
</body>

</html>
